<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "AddMassivePoint.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      MapboxCommonService.setCZBP(map, [-122.447303, 37.753574], 12)

      // 给圆添加数据驱动属性的样式，使用circle-color数据表达式来进行可视化。
      map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': {
          type: 'vector',
          url: `${window.location.origin}/mapbox-test/libs/mapbox/assets/examples.8fgz4egr.json`
        },
        'source-layer': 'sf2010',
        'paint': {
          // make circles larger as the user zooms from z12 to z22
          'circle-radius': {
            'base': 1.75,
            'stops': [[12, 2], [22, 180]]
          },
          // color circles by ethnicity, using a match expression
          // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
          'circle-color': [
            'match',
            ['get', 'ethnicity'],
            'White', '#fbb03b',
            'Black', '#223b53',
            'Hispanic', '#e55e5e',
            'Asian', '#3bb2d0',
            /* other */ '#ccc'
          ]
        }
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>